<template>
  <el-container class="main_con nobg nopd">
    <div class="filter_con ds_block nopt nomt">
      <div class="filter_area">
        <span v-if="nowType == 'mall'&&addons.indexOf(12)>-1">
          <label class="mr_15 mt_15">商户类型：</label>
          <el-select
            v-model="obj.is_self"
            clearable
            filterable
            placeholder="请选择"
            class="serach_input mr_15 mt_15"
          >
            <el-option
              v-for="item in restaurants1"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span v-if="obj.is_self !== 1&&addons.indexOf(12)>-1">
            <label class="mr_15 mt_15">商户名称：</label>
            <el-select
              v-model="obj.merchant_id"
              clearable
              filterable
              placeholder="请选择"
              class="serach_input mr_15 mt_15"
            >
              <el-option
                v-for="item in restaurants"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </span>
        </span>
        <label class="mr_15 mt_15">用户名称：</label>
        <el-input
          size="medium"
          class="serach_input mr_15 mt_15"
          v-model="obj.nickname"
          placeholder="用户名称"
        ></el-input>
        <label class="mr_15 mt_15">订单编号：</label>
        <el-input
          size="medium"
          class="serach_input mr_15 mt_15"
          v-model="obj.order_no"
          placeholder="订单编号"
        ></el-input>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium"
          >搜索</el-button
        >
      </div>
    </div>
    <div
      class="filter_con ds_block nopt nomt"
      style="margin-top: 20px; padding-top: 20px"
    >
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <el-table-column
          label="商户名称"
          prop="merchant_name"
          width="120"
          v-if="nowType == 'mall'"
        ></el-table-column>
        <el-table-column label="用户" width="180">
          <template slot-scope="scope">
            <!--    <div>
              <span>{{scope.row.name}}</span>
              <img :src="scope.row.picurl" />
            </div>-->
            <div class="user">
              <div class="face">
                <vimage
                  :src="scope.row.picurl"
                  style="
                    width: 50px;
                    height: 50px;
                    display: block;
                    border-radius: 50%;
                  "
                ></vimage
>
              </div>
              <div class="info">
                <div class="name" :title="scope.row.name">
                  {{ scope.row.nickname }}
                </div>
                <!-- <div class="source"><i class="weixin el-sc-weixin"></i></div> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="order_no"></el-table-column>
        <el-table-column label="支付方式" width="120">
          <template slot-scope="scope">
            <span>{{ payType(scope.row.pay_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单总额" width="160">
          <template slot-scope="scope"
            >{{ scope.row.money }}元<br />
            (含运费：￥{{ scope.row.freight || "0.00" }})</template
          >
        </el-table-column>
        <el-table-column label="积分抵扣" width="80">
          <template slot-scope="scope">
            {{ scope.row.discount_amount }}元
          </template>
        </el-table-column>
        <el-table-column label="优惠券" width="80">
          <template slot-scope="scope">{{ scope.row.discount }}元</template>
        </el-table-column>
        <el-table-column label="退款金额" width="80">
          <template slot-scope="scope">{{ scope.row.refund }}元</template>
        </el-table-column>
        <el-table-column label="分销扣除" width="80">
          <template slot-scope="scope">{{ scope.row.agent_cash }}元</template>
        </el-table-column>
        <el-table-column label="进账" width="80">
          <template slot-scope="scope">{{ scope.row.account }}元</template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="160"
        ></el-table-column>
        <el-table-column
          label="订单状态"
          prop="settlement"
          width="120"
        ></el-table-column>
        <!--        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showAgentCash(scope.row.order_no)"
              >分销详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          @current-change="changePage"
          :current-page="page"
          :total="total"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import { setShoplementList } from "@/api/shop/finance";
import { setMalllementList } from "@/api/mall/finance";
import { getMerchantList } from "@/api/mall/merchant";
import { logintype_byurl } from "@/utils/auth";
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      pay_type: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "余额",
        },
        {
          value: 2,
          label: "微信",
        },
        {
          value: 3,
          label: "支付宝",
        },
        {
          value: 4,
          label: "后台支付",
        },
      ],
      obj: {
        merchant_id: "",
        is_self: "",
        nickname: "",
        order_no: "",
      },
      list: [],
      page: 1,
      size: 10,
      total: 0,
      dialogVisible: false,
      distributionList: [],
      nowType: "",
      restaurants: [],
      restaurants1: [
        { id: -1, value: "全部" },
        { id: 1, value: "自营" },
        { id: 0, value: "非自营" },
      ],
    };
  },
  created() {
    if (logintype_byurl() == "mall") {
      this.nowType = "mall";
    } else if (logintype_byurl() == "shop") {
      this.nowType = "shop";
    }
  },
  mounted() {
    this.searchList();
  },
  computed: {
    payType() {
      return function (val) {
        for (let i = 0; i < this.pay_type.length; i++) {
          if (this.pay_type[i].value == val) {
            return this.pay_type[i].label;
          }
        }
      };
    },
      ...mapGetters(['addons'])

  },
  methods: {
    // 获取商户列表
    getMerchant() {
      if(this.addons.indexOf(12)==-1){
        return false
      }
      let data = {};
      getMerchantList(data, 1, 999).then((res) => {
        this.restaurants = res.msg.data;
      });
      // let datar = [
      //     {
      //       label:'自营',
      //       is_self:1,
      //       options:[],
      //     },{
      //       label:'非自营',
      //       is_self:0,
      //       options:[]
      //     }
      //   ]
      //   datar.forEach(item=>{
      //     if(item.is_self ==0){
      //       item.options = res.msg.data
      //     }
      //   })
      //   this.restaurants = datar;
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    searchList() {
      if (this.obj.is_self == -1) {
        delete this.obj.is_self;
      }
      if (this.obj.is_self == 1) {
        delete this.obj.merchant_id;
      }
      this.objTemp = Object.assign({}, this.obj);

      this.page = 1;
      this.getDataList();
    },
    getDataList() {
      if (this.nowType == "mall") {
        setMalllementList(this.objTemp, this.page, this.size).then((res) => {
          this.list = res.msg.data;
          this.total = res.msg.total;
          this.getMerchant();
        });
      } else if (this.nowType == "shop") {
        setShoplementList(this.objTemp, this.page, this.size).then((res) => {
          this.list = res.msg.data;
          this.total = res.msg.total;
        });
      }
    },
    // 计算
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    showAgentCash(row) {
      this.$router.push({
        path: "/agent/order",
        query: {
          order_no: row,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  text-align: left;
}
.main_con {
  // width: 82.1vw;
  // margin:  0 auto;
  padding: 20px;
}
.user {
  display: flex;
  padding-left: 5px;
  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    justify-content: center;
    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: "ellipsis"; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
</style>
